<template>
	<div class="e-search-box" style="position:relative;">
		<div :class="{'e-search-form': true}">
			<el-form ref="searchForm" :label-width="formLabelWidth" :model="formData" @submit.native.prevent>
				<el-row>
					<el-col v-for="(item, index) in formOptions" :key="index" :span="item.span || 24">
						<el-form-item :label="item.label" :prop="item.prop ? item.prop : item.key"
							class="e-search-from-item">
							<template v-if="item.type === 'input'">
								<el-input v-model="formData[item.key]" v-bind="item.props" size="small" clearable>
								</el-input>
							</template>
							<template v-if="item.type === 'number'">
								<el-input-number v-model="formData[item.key]" v-bind="item.props" size="small"
									style="width:100%;">
								</el-input-number>
							</template>
							<template v-if="item.type === 'select'">
								<el-select v-model="formData[item.key]" v-bind="item.props" clearable filterable
									style="width:100%;" @change="changeSelect" size="small">
									<el-option v-for="(sitem, sindex) in item.options" :key="sindex"
										:label="sitem.label" :value="sitem.value">
									</el-option>
								</el-select>
							</template>
							<template v-if="item.type === 'time'">
								<el-time-select v-model="formData[item.key]" v-bind="item.props" size="small"
									style="width:100%;">
								</el-time-select>
							</template>
							<template v-if="item.type === 'date'">
								<el-date-picker v-model="formData[item.key]" type="date" v-bind="item.props" size="small"
									style="width:100%;">
								</el-date-picker>
							</template>
							<template v-if="item.type === 'datetime'">
								<el-date-picker v-model="formData[item.key]" type="datetime" size="small"
									placeholder="请选择日期">
								</el-date-picker>
							</template>
							<template v-if="item.type === 'daterange'">
								<el-date-picker v-model="formData[item.key]" v-bind="item.props" size="small"
									type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
									value-format="yyyy-MM-dd HH:mm:ss" style="width:100%;">
								</el-date-picker>
							</template>

							<template v-if="item.type === 'datetimerange'">
								<el-date-picker v-model="formData[item.key]" v-bind="item.props" size="small"
									type="datetimerange" range-separator="至" start-placeholder="开始日期"
									end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" style="width:100%;">
								</el-date-picker>
							</template>
							<template v-if="item.type === 'radio'">
								<el-radio-group v-model="formData[item.key]" v-bind="item.props" size="small">
									<el-radio v-for="(sitem, sindex) in item.options" :key="sindex"
										:label="sitem.label">{{sitem.text}}</el-radio>
								</el-radio-group>
							</template>
							<template v-if="item.type === 'checkbox'">
								<el-checkbox-group v-model="formData[item.key]" v-bind="item.props" size="small">
									<el-checkbox v-for="(sitem, sindex) in item.options" :key="sindex"
										:label="sitem.label" v-bind="sitem.props">{{sitem.text}}</el-checkbox>
								</el-checkbox-group>
							</template>
							<template v-if="item.type === 'cascader'">
								<el-cascader v-model="formData[item.key]" v-bind="item.props" size="small"
									style="width:100%;" clearable filterable>
								</el-cascader>
							</template>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<el-row style="position:absolute;top:-40px;right:-30px;width:150px;z-index:9;" class="e-btn">
			<el-col :span="24">
				<el-button type="text" icon="el-icon-search" @click="handleSearch" size="small">查询</el-button>
				<el-button type="text" v-if="refreshShow" icon="el-icon-refresh-right" @click="handleRefresh" size="small">重置
				</el-button>
				<el-button v-if="insertShow" type="success" icon="el-icon-plus" @click="handleInsert" size="small">新增
				</el-button>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		name: 'e-search',
		components: {},
		props: {
			// 查询表单配置
			formOptions: {
				type: Array,
				default () {
					return []
				}
			},
			// 查询表单label宽度
			formLabelWidth: {
				type: String,
				default: '80px'
			},
			// 是否显示重置按钮
			refreshShow: {
				type: Boolean,
				default: true
			},
			// 是否显示新增按钮
			insertShow: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				formData: {},
				open: false,
				list: []
			}
		},
		watch: {
			formOptions(value) {
				this.handleFormDateCreate(value)
			}
		},
		computed: {
			// 根据表单配置计算表单高度
			formHeight() {
				return this.open ? (50 * this.searchFormLine) : 50
			},
			// 根据表单配置控制是否显示展开按钮
			openBtn() {
				return this.formOptions.length >= 3
			},
			// 根据表单配置计算表单行数
			searchFormLine() {
				let line = 0
				this.formOptions.map(item => {
					line = line + (item.span || 24)
				})
				return (line % 24) > 0 ? parseInt(line / 24 + 1) : (line / 24)
			}
		},
		methods: {
			/**
			 * @functionName handleFormDateCreate
			 * @param {Array} list 查询表单配置数组
			 * @description 初始化查询表单的数据
			 * @author 张航
			 * @date 2020-10-13 08:44:15
			 * @version V1.0.0
			 */
			handleFormDateCreate(list) {
				list.map(item => {
					let data
					switch (item.type) {
						case 'checkbox':
							data = []
							break
						case 'cascader':
							data = []
							break
						default:
							data = ''
							break
					}
					this.$set(this.formData, item.key, data)
				})
				this.$emit('change-height', this.formHeight)
			},
			changeSelect(t) {
				this.$emit('changeSelect', this.formData)
			},
			handleOpen() {
				this.open = !this.open
				this.$emit('change-height', this.formHeight)
			},
			handleSearch() {
				this.$emit('on-search', this.formData)
			},
			handleRefresh() {
				this.$refs.searchForm.resetFields()
				this.$emit('on-refresh', this.formData)
			},
			handleInsert() {
				this.$refs.searchForm.resetFields()
				this.$emit('on-insert', this.formData)
			}
		},
		created() {
			this.handleFormDateCreate(this.formOptions)
		},
		mounted() {}
	}
</script>
<style lang="scss" scoped>
	.e-search-box {
		margin-bottom: 10px;

		&::after {
			content: '';
			display: block;
			clear: both;
		}
	}

	.action-box {
		padding-left: 30px;
	}
	.asd .e-search-box .el-row{
		top:0px !important;
		.el-col-24{
			margin-top:5px;
		}
	}
</style>
